* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

li, a {
  list-style: none;
  text-decoration: none;
  color: black;
}

html, body, #root {
  width: max-content !important;
  height: max-content !important;
  min-width: 100% !important;
  min-height: 100% !important;
  font-size: 16px;
}

li {
  list-style: none;
}

#root {
  padding: 10px 25px;
}

$fontcolor_1: #676767;
$li_width_1: 14%;
$li_width_2: 25%;
$li_width_3: $li_width_1;
$li_width_4: 10%;
$li_width_5: $li_width_2;
$li_width_6: 7%;

@mixin width {
  &:nth-child(1) {
    width: $li_width_1;
    min-width: 150px;
  }

  &:nth-child(2) {
    width: $li_width_2;
    min-width: 300px;
  }

  &:nth-child(3) {
    width: $li_width_3;
    min-width: 150px;
  }

  &:nth-child(4) {
    width: $li_width_4;
    min-width: 140px;
  }

  &:nth-child(5) {
    width: $li_width_5;
    min-width: 160px;
  }

  &:nth-child(6) {
    width: $li_width_6;
    min-width: 100px;
  }

  &:nth-child(7) {
    flex-grow: 1;
    min-width: 100px;
  }
}

.comm_title {
  background: #f6f7f7;
  padding: 15px;

  & ul {
    display: flex;

    & li {
      color: $fontcolor_1;
      @include width;
    }
  }
}

.comm_content {
  margin-top: 20px;

  & > ul {
    font-size: 14px;

    & > li {
      &:nth-child(1) {
        & div {
          display: flex;
          padding: 15px;

          & span {
            &:nth-of-type(1) {
              font-weight: 700;
              padding: 0 10px;
            }

            &:nth-of-type(2) {
              color: $fontcolor_1;
              padding-right: 30px;
            }
          }
        }
      }

      &:nth-child(2) {
        background: #fbfbfb;
        border: 1px solid #e9e9e9;
        margin-top: 15px;
        padding: 15px;

        & ul {
          display: flex;

          & li {
            @include width;
            padding-right: 10px;

            &:first-child {
              display: flex;

              & img {
                border: 1px solid #e9e9e9;
                margin-left: 15px;
              }
            }
          }
        }
      }
    }
  }
}

#comm_num {
  $button: 30px;

  & div {
    display: flex;

    & button {
      width: $button;
      height: $button;
      border: 1px solid #e9e9e9;
      background: #f5f7fa;
      font-size: 20px;
      color: #676767;
    }

    & input {
      width: calc(35% - #{$button} * 2);
      text-align: center;
      outline: none;
      border-style: solid;
      border-color: #dcdfe6;
      border-width: 1px 0;
    }
  }
}
